import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install (app) {
        app.directive('img-lazy',{
            mounted(el,binding) {
                // el 指令绑定的元素
                // bingding.value 等于指令绑定后面的表达式的值
                const { stop } = useIntersectionObserver(
                    el,
                    ([{isIntersecting}]) => {
                        if (isIntersecting) {
                            // 进入视口
                            el.src = binding.value
                            stop()
                        }
                    }
                )
            },
        })
    }
}